/**
 * 侧边栏视频横幅交互逻辑
 */
class SidebarVideoBanner {
    constructor(options = {}) {
        this.options = {
            videoUrl: 'https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-a-city-map-2215-large.mp4',
            title: '新闻内容管理平台~~~',
            subtitle: '实时更新 · 智能审核 · 高效发布',
            ...options
        };
        
        this.sidebar = document.querySelector('.el-aside');
        this.isPlaying = true;
        
        if (this.sidebar) {
            this.createVideoBanner();
            this.initVideo();
            this.bindEvents();
        }
    }
    
    // 创建视频横幅元素
    createVideoBanner() {
        const banner = document.createElement('div');
        banner.className = 'sidebar-video-banner';
        
        const video = document.createElement('video');
        video.setAttribute('autoplay', '');
        video.setAttribute('muted', '');
        video.setAttribute('loop', '');
        video.setAttribute('playsinline', '');
        
        const source = document.createElement('source');
        source.src = this.options.videoUrl;
        source.type = 'video/mp4';
        
        video.appendChild(source);
        banner.appendChild(video);
        
        const content = document.createElement('div');
        content.className = 'sidebar-video-content';
        
        const title = document.createElement('h3');
        title.textContent = this.options.title;
        
        const subtitle = document.createElement('p');
        subtitle.textContent = this.options.subtitle;
        
        content.appendChild(title);
        content.appendChild(subtitle);
        banner.appendChild(content);
        
        const control = document.createElement('div');
        control.id = 'videoControl';
        control.className = 'sidebar-video-control';
        control.innerHTML = '<i class="el-icon-pause"></i>';
        banner.appendChild(control);
        
        // 将视频横幅插入到侧边栏菜单前
        const menu = this.sidebar.querySelector('el-menu');
        if (menu) {
            this.sidebar.insertBefore(banner, menu);
        } else {
            this.sidebar.appendChild(banner);
        }
        
        this.video = video;
        this.control = control;
    }
    
    // 初始化视频
    initVideo() {
        // 视频加载错误处理
        this.video.addEventListener('error', () => {
            console.error('视频加载失败，使用备用内容');
            // 可以在这里添加备用内容
        });
    }
    
    // 绑定事件
    bindEvents() {
        if (!this.control) return;
        
        // 视频控制按钮点击事件
        this.control.addEventListener('click', () => {
            if (this.isPlaying) {
                this.pauseVideo();
            } else {
                this.playVideo();
            }
        });
        
        // 鼠标悬停效果
        const banner = document.querySelector('.sidebar-video-banner');
        if (banner) {
            banner.addEventListener('mouseenter', () => {
                this.control.style.opacity = '1';
            });
            
            banner.addEventListener('mouseleave', () => {
                if (this.isPlaying) {
                    this.control.style.opacity = '0.7';
                }
            });
        }
    }
    
    // 播放视频
    playVideo() {
        this.video.play();
        this.control.innerHTML = '<i class="el-icon-pause"></i>';
        this.isPlaying = true;
    }
    
    // 暂停视频
    pauseVideo() {
        this.video.pause();
        this.control.innerHTML = '<i class="el-icon-play"></i>';
        this.isPlaying = false;
    }
}

// 初始化侧边栏视频
window.addEventListener('DOMContentLoaded', () => {
    new SidebarVideoBanner({
        videoUrl: 'https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-a-city-map-2215-large.mp4',
        title: '新闻内容管理平台',
        subtitle: '实时更新 · 智能审核 · 高效发布'
    });
});    